﻿<!DOCTYPE html>
<html>	
<head>
	<title>登录界面</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<meta name="keywords" content="User Login Form Responsive Templates, Iphone Widget Template, Smartphone login forms,Login form, Widget Template, Responsive Templates, a Ipad 404 Templates, Flat Responsive Templates" />
	<link href="css/style.css" rel='stylesheet' type='text/css' />
	<meta charset="UTF-8">
	<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
	<!--User-Login-->
	<h1>User Login</h1>

	<div class="avtar">
		<img src="img/avtar.png" />
	</div>

	<div class="login-form">
		<p>New user?<a href="register.html">Register here!</a></p>
		<div class="form-text">
			<!--value是用来在没有填任何内容的情况下，给的默认值。后面的onfocus和onblur也是围绕这一点的-->
			<input type="text" id="username" class="text" value="USERNAME" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'USERNAME';}" >
			<input type="password" id="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}">
		</div>
		<input type="submit" id="submit" value="登录" >
	</div>

	<div class="copy-right">
	<!--这个不用管了-->
		<p><a target="_blank" href="http://www.mobanwang.com/" title="网页模板"></a></p>
	</div>

	<!-- 引入 jquery -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 实现前后端交互的逻辑 -->
    <script>
        let submitButton = document.querySelector('#submit');
        submitButton.onclick = function() {
            // 1. 先获取到输入框中的内容
            let username = document.querySelector('#username').value;
            let password = document.querySelector('#password').value;
            if (username == '' || password == '') {
                alert("当前输入的用户名或者密码为空!");
                return;
            }

            // 2. 再发送 ajax 请求进行登录
            $.ajax({
                url: '/login',
                type: 'post',
                data: {
                    username: username,
                    password: password
                },
                success: function(body) {
                    // 3. 处理响应
                    // 此处的 body 相当于响应的 user 对象
                    if (body && body.userId > 0) {
                        // 登录成功!
                        alert("登录成功!");
                        // 跳转到客户端主页面 (聊天页面)
                        location.assign('/client.html');
                    } else {
                        alert("登录失败!");
                    }
                }
            });
        }
    </script>
</body>
</html>